import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

//学习测试
const testModel = {
  //单一状态树
  state: {
    count: 0,
    todos: [
      {id: 1, text: '...', done: true},
      {id: 2, text: '...', done: false}
    ]
  },

  getters: {
    // 注意，getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的。(what's mean) TODO
    doneTodos: function (state) {
      return state.todos.filter(todo => todo.done)
    },

    // getTodoById: (state) => (id) => {
    //   return state.todos.find(todo => todo.id === id)
    // },
    // 注意，getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。
    getTodoById: function (state) {
      return function (id) {
        return state.todos.find(function (todo) {
          return todo.id === id;
        })
      };
    }
  },
  //更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
  //Mutation 必须是同步函数
  mutations: {
    increment: function (state) {
      return state.count++;
    },
    decrement: state => state.count--,
  },

  /**
   * Action 类似于 mutation，不同在于：
   1. Action 提交的是 mutation，而不是直接变更状态。
   2. Action 可以包含任意异步操作。
   */
  actions: {
    incrementAsync(context) {

      return new Promise(function (resolve, reject) {
        setTimeout(() => {
          context.commit('increment')
          resolve('hhh')
        }, 2000)
      })

    },

    //  参数结构的方式
    // incrementAsync ({commit}) {
    //   commit('increment')
    // }
  }
}

//真实项目模块
const chartModel = {
  state:{
    userInfo:{}
  },
  getters:{
    getUserInfo:function (state) {
      //查看本地是否存有用户信息
      var userInfo = JSON.parse(localStorage.getItem("userInfo"))
      if(userInfo!=null){
        state.userInfo = userInfo
      }
      return state.userInfo
    }
  },
  mutations:{
    setUserInfo:function(state,user){
       state.userInfo = user
      //将用户信息保存到本地一份
      localStorage.setItem("userInfo", JSON.stringify(user))
    }
  }

}

export default new Vuex.Store({
  modules: {
    a: testModel,
    chart: chartModel
  }
})
